<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="//bootswatch.com/flatly/bootstrap.css"/>
    <link rel="stylesheet" href="main.css"/>
</head>

<body>
<div id="app">
    <div class="row">
        <div class="col-xs-offset-2 col-xs-8">
            <div class="page-header">
                <h2>Router Basic - 02</h2>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-2 col-xs-offset-2">
            <div class="list-group">
                <router-link to='/home' v-on:click="changTxt('Home')" class="list-group-item">Home</router-link>
                <router-link class="list-group-item"  v-on:click="changTxt('Home')" to='/about'>About</router-link>
                {{msg}}
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel">
                <div class="panel-body">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</div>

<template id="home">
    <div>
        <div>
            <h1>Home</h1>
            <p>{{msg}}</p>
        </div>
        <div>
            <ul class="nav nav-tabs">
                <li>
                    <router-link to="/home/news/123/456 ">News</router-link>
                </li>
                <li>
                    <router-link to="/home/message">Messages</router-link>
                </li>
            </ul>
            <router-view></router-view>
        </div>
    </div>
</template>

<template id="news">
    <ul>
        <li>News 01</li>
        <li>News 02</li>
        <li>News 03</li>
    </ul>
</template>
<template id="message">
    <ul>
        <li>Message 01</li>
        <li>Message 02</li>
        <li>Message 03</li>
    </ul>
</template>

<template id="about">
    <div>
        <h1>About</h1>
        <p>This is the tutorial about vue-router.</p>
    </div>
</template>

</body>
<script src="../js/vue.min.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    var Home = Vue.extend({
        template: '#home',
        data: function () {
            return {
                msg: 'Hello, vue router!'
            }
        },
        methods:{
            changTxt:function(showData){
                this.msg=showData
            }
        }
    })

    var News = Vue.extend({
        template: '#news',
        mounted: function () {
            console.log('deviceid: ' + this.$route.params.deviceId);
            console.log('dataId: ' + this.$route.params.dataId);
        }
    })

    var Message = Vue.extend({
        template: '#message'
    })

    var About = Vue.extend({
        template: '#about'
    })
    //创建路由表
    var routes = [
        {
            path: '/home', component: Home,
            children: [

                {path: 'news/:deviceId/:dataId', component: News, name: 'news'},

                {path: 'message', component: Message}
            ]
        },
        {
            path: '/about',
            component: About
        }
    ]
    // 创建 router 实例，然后传 `routes` 配置
    router = new VueRouter({
//        mode: 'history',
//        base: __dirname,
        routes: routes
    })
    //    创建和挂载根实例
    const app = new Vue({
        router
    }).$mount('#app')

</script>

</html>